<template>
  <div>
    <el-form ref="dataForm" :rules="addRules" :model="addUser" label-position="center" label-width="70px" style="width: 400px; margin-left:50px;">
      <el-form-item label="name" prop="name" label-width="80px">
        <el-input v-model="addUser.name" name="name" />
      </el-form-item>
      <el-form-item label="生日" prop="timestamp" label-width="80px">
        <el-date-picker v-model="addUser.birth" type="datetime" placeholder="Please pick a date" />
      </el-form-item>
      <el-form-item label="角色" prop="role" label-width="80px">
        <el-select v-model="addUser.role" class="filter-item" placeholder="Please select">
          <el-option v-for="item in roles" :key="item.key" :label="item.name" :value="item.key" />
        </el-select>
      </el-form-item>
      <el-form-item label="密码" prop="password" label-width="80px">
        <el-input v-model="addUser.password" />
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmedPassword" label-width="80px">
        <el-input v-model="addUser.confirmedPassword" />
      </el-form-item>
      <el-form-item label="性别" label-width="80px" prop="sex">
        <el-radio v-model="addUser.sex" label="man">男</el-radio>
        <el-radio v-model="addUser.sex" label="woman">女</el-radio>
      </el-form-item>
      <el-form-item label="电话" prop="tel" label-width="80px">
        <el-input v-model="addUser.tel" />
      </el-form-item>
      <el-form-item label="身份证" prop="idNumber" label-width="80px">
        <el-input v-model="addUser.idNumber" />
      </el-form-item>
      <el-form-item label="邮箱" prop="emailAddress" label-width="80px">
        <el-input v-model="addUser.emailAddress" />
      </el-form-item>
      <el-form-item label="描述" prop="desc" label-width="80px">
        <el-input v-model="addUser.desc" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="Please input" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="goBackClick">
        返回
      </el-button>
      <el-button type="primary" @click="registerClick">
        提交注册申请
      </el-button>
    </div>
    <el-dialog :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="用户名:" prop="desc">
          <span> {{ addUser.name }}</span>
        </el-form-item>
        <el-form-item label="密码:" prop="desc">
          <span> {{ addUser.password }}</span>
        </el-form-item>
        <el-form-item label="邮箱:" prop="desc">
          <span> {{ addUser.emailAddress }}</span>
        </el-form-item>
        <div class="tips">
          <span style="margin-right:20px;">请在此核对上述信息！</span>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          返回
        </el-button>
        <el-button type="primary" @click="confirmHandle">
          确认提交
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  validEmailAddress,
  validIdNumber,
  validLegalPassword,
  validPassword,
  validPhoneNumber, validQQ,
  validUsername
} from '@/utils/validate'
import { getRoles } from '@/api/role'
import { registerBySelf } from '@/api/register'

export default {
  data() {
    const validateUsername = (rule, value, callback) => {
      console.log('validateUsername:' + value)
      if (!validUsername(value)) {
        callback(new Error('Please enter the correct user name'))
      } else {
        callback()
      }
    }
    const validatePassword = (rule, value, callback) => {
      if (!validPassword(value)) {
        callback(new Error('less than 6 digits or more than 16'))
      } else if (!validLegalPassword(value)) {
        callback(new Error('只能使用中文、英文、数字包括下划线'))
      } else {
        callback()
      }
    }
    const validateConfirmedPassword = (rule, value, callback) => {
      if (this.addUser.password === value) {
        callback()
      } else {
        callback(new Error('两次密码不同'))
      }
    }
    const validateTel = (rule, value, callback) => {
      if (!validPhoneNumber(value)) {
        callback(new Error('请输入正确的手机号码'))
      } else {
        callback()
      }
    }
    const validateRole = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('role不能为空'))
      } else {
        callback()
      }
    }
    const validateIdNumber = (rule, value, callback) => {
      if (!validIdNumber(value)) {
        callback(new Error('请输入正确身份证号码'))
      } else {
        callback()
      }
    }
    const validateMailAddress = (rule, value, callback) => {
      if (!validEmailAddress(value)) {
        callback(new Error('邮件地址不合法'))
      } else {
        callback()
      }
    }
    const validateAge = (rule, value, callback) => {
      if (value < 0 || value > 150) {
        callback(new Error('年龄不合法'))
      } else {
        callback()
      }
    }
    const validateQQ = (rule, value, callback) => {
      if (!validQQ(value)) {
        callback(new Error('qq号不正确'))
      } else {
        callback()
      }
    }
    const validateDesc = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('描述不能为空'))
      } else {
        callback()
      }
    }
    const validateSex = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请选择性别'))
      } else {
        callback()
      }
    }
    return {
      addUser: {
        name: 'admin',
        password: '',
        confirmedPassword: '',
        birth: '',
        sex: '',
        dept: '',
        role: '',
        tel: '',
        idNumber: '',
        emailAddress: '',
        age: '',
        QQ: '',
        desc: ''
      },
      addRules: {
        name: [{ required: true, trigger: 'change', validator: validateUsername }],
        password: [{ required: true, trigger: 'change', validator: validatePassword }],
        confirmedPassword: [{ required: true, trigger: 'change', validator: validateConfirmedPassword }],
        birth: [{ type: 'date', required: true, message: 'birth day is required', trigger: 'change' }],
        sex: [{ type: 'date', required: true, message: '未选择性别', trigger: 'change', validator: validateSex }],
        dept: [{ required: true, trigger: 'change' }],
        role: [{ required: true, trigger: 'change', validator: validateRole }],
        tel: [{ required: true, trigger: 'change', validator: validateTel }],
        idNumber: [{ required: true, trigger: 'change', validator: validateIdNumber }],
        emailAddress: [{ required: true, trigger: 'change', validator: validateMailAddress }],
        age: [{ required: true, trigger: 'change', validator: validateAge }],
        QQ: [{ required: true, trigger: 'change', validator: validateQQ }],
        desc: [{ required: true, trigger: 'change', validator: validateDesc }]
      },
      dialogFormVisible: false,
      roles: [
        {
          key: 'admin',
          name: 'admin',
          description: 'Super Administrator. Have access to view all pages.'
        }]
    }
  },
  created() {
    console.log('create:')
    getRoles().then(response => {
      this.roles = response.data
    })
  },
  methods: {
    goBackClick() {
      this.$router.push({ path: '/login' || '/' })
    },
    registerClick() {
      this.$refs.dataForm.validate(valid => {
        if (valid) {
          this.dialogFormVisible = true
          console.log('register')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    confirmHandle() {
      console.log('confirmHandle')
      registerBySelf(this.addUser)
    }
  }
}
</script>

<style scoped>

</style>
